<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

<ui:composition>
	<h:outputStylesheet>
		.pBody {
			width: 200px;
			height: 300px;
			vertical-align: top;
		}	
		.navPanel {
	        position:absolute;
	        bottom:0;
	        height:23px;
	        margin:0;
	        padding:2px;
        }	 
        .tabDiv {
	        margin-right: 5px;
	        border: 1px solid #{richSkin.panelBorderColor};
	        background-color: #{richSkin.headerBackgroundColor};
	        cursor: pointer;
	        padding-left: 5px;
	        float: left;
        }
        .label {
		    font-weight: bold;
		}	
	</h:outputStylesheet>
	<h:outputScript target="head">
		jQuery.noConflict();				
	</h:outputScript>
	<h:form id="PreviewForm" rendered="#{orderAction.size > 0}">
		<rich:dataGrid id="PreviewGrid" value="#{orderAction.orderRequest.itemOrdereds}"
	           var="orderItem" rowKeyVar="row" columns="#{orderAction.size ge 4 ? 4 : orderAction.size}" elements="12">
	        <f:facet name="header">
		     	<h:panelGrid columns="2" width="100%" columnClasses="leftAlign, rightAlign">
		         	<h:outputText value="You've Uploaded #{orderAction.size} Photos"></h:outputText>
		         	<h:panelGroup>
			         	<a4j:commandButton value="Delete All" style="float:right" action="#{orderAction.clearUploadData}" 
							rendered="#{orderAction.size > 0}" execute="@this" render="FileUploadGrid">		           
						</a4j:commandButton>
						<a4j:commandButton value="Preview SlideShow" style="float:right" 
		                	onclick="#{rich:component('slideShowPane')}.show();">               		                   		 
		               	</a4j:commandButton>
	               	</h:panelGroup>
				</h:panelGrid>
		    </f:facet>
	        <rich:panel bodyClass="pBody">
	            <h:panelGrid columnClasses="centerAlign">
	            	<h:panelGrid columns="2" columnClasses="rightAlign, leftAlign" width="100%" cellspacing="5">
	            		<a4j:commandButton image="/resources/images/icons/search.png" execute="@this"
	                	render="FileUploadGrid" oncomplete="#{rich:component('fullviewPane')}.show();">
	                		<a4j:param assignTo="#{orderAction.currentPhotoIndex}" value="#{row}"/>	                    		 
	                	</a4j:commandButton>
	                	<a4j:commandButton image="/resources/images/icons/trash.png" action="#{orderAction.deletePhoto}" 
	                		render="FileUploadGrid" execute="@this">
	                		<a4j:param assignTo="#{orderAction.currentPhotoIndex}" value="#{row}"/>	                    		
	                	</a4j:commandButton>
	                </h:panelGrid>
	                <h:panelGrid style="width:200px; height:200px;" columnClasses="topAlign">
	               	   	<a4j:mediaOutput id="thumbnailImage" element="img" mimeType="image/jpeg"
			               createContent="#{orderAction.paintThumbnail}" value="#{row}"
			               cacheable="false">	                        
			            </a4j:mediaOutput>				
	                </h:panelGrid>
	                <h:panelGrid columns="2" cellspacing="5" columnClasses="rightAlign, leftAlign">
	                	<h:outputText value="Name: " styleClass="label"/>
		               	<h:inputText value="#{orderItem.image.imageName}"><a4j:ajax execute="@this"/></h:inputText>
	                    <h:outputText value="Copies: " styleClass="label"/>
	                 	<rich:inputNumberSpinner enableManualInput="false" maxValue="10" minValue="1" value="#{orderItem.quantity}">
	                 		<a4j:ajax execute="@this"/>
	                 	</rich:inputNumberSpinner>  
	                </h:panelGrid>
	            </h:panelGrid>
	        </rich:panel>
	        <f:facet name="footer">
	               <rich:dataScroller />
	           </f:facet>
	    </rich:dataGrid>
	    <h:panelGrid width="100%" rendered="#{orderAction.size > 0}">    
			<h:panelGroup>
				<a4j:commandButton value="Next &gt;&gt;" style="float:right" action="/pages/photos/selectStudio">	            
		        </a4j:commandButton>
	        </h:panelGroup>	        						
	   	</h:panelGrid>
   	</h:form>	
    <rich:popupPanel id="fullviewPane" modal="false" header="Best View" width="625" height="500" 
    	followByScroll="true" rendered="#{orderAction.size > 0}">
    	<a4j:mediaOutput id="FullImage" element="img" mimeType="image/jpeg"
           createContent="#{orderAction.paint}" value="#{orderAction.currentPhotoIndex}"
           cacheable="false">	                        
        </a4j:mediaOutput>
	    <f:facet name="controls">
          	<h:graphicImage url="/resources/images/close.gif" width="16px" height="16px" 
           		onclick="#{rich:component('fullviewPane')}.hide(); return false;" style="cursor: pointer;"/>            
        </f:facet>
    </rich:popupPanel>
    <rich:popupPanel id="slideShowPane" autosized="true" moveable="true" modal="true" followByScroll="true" 
    	width="740" height="540" rendered="#{orderAction.size > 0}">
		<ui:include src="/pages/photos/photoSlider.xhtml" />
		<f:facet name="controls">		
	   		<h:graphicImage url="/resources/images/closelabel.gif" onclick="#{rich:component('slideShowPane')}.hide(); return false;" style="cursor: pointer;"/>	   	        
	   	</f:facet>
    </rich:popupPanel>		
</ui:composition>
</html>